<template>
  <NavBar></NavBar>
  <div class="HandleFriend-container">
    <div class="HandleFriend-box">
      <div class="search-title">好友列表</div>

      <el-button
          type="primary"

          @click.prevent="Refreshing(true)"
      >
        刷新好友列表
      </el-button>
      <!-- 使用 Element Plus 的表格组件 -->
      <el-table :data="friendRequests" style="width: 100%;height:60vh;font-size: 20px">
        <el-table-column prop="avatarUrl" label="头像" min-width="240">
          <template #default="{ row }">
            <img :src="row.avatarUrl" alt="" class="user-avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" min-width="240"/>
        <el-table-column prop="email" label="邮箱" min-width="240"/>
        <el-table-column label="游玩天数" min-width="240">
          <template #default="{ row }">
            {{ row.gameDays }}天
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="{ row }">
            <el-popconfirm @confirm="clearFriend(row.userId)" title="你确定要删除好友?">
              <template #reference>
                <el-button
                    type="danger"
                    round
                >
                  删除好友
                </el-button>
              </template>
            </el-popconfirm>
            <el-button
                type="success"
                @click="privateChat(row.userId)"
                round
            >
              私聊
            </el-button>
          </template>

        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref,} from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import $ from "jquery"; // 引入 jQuery
import { Search } from '@element-plus/icons-vue'
import NavBar from "@/components/NavBar.vue";

export default {
  components: {NavBar},
  setup() {
    const store = useStore();

    const friendRequests = ref([]);
    const form = reactive({
      searchParam: "",
    });

    const getFriendList = (send) => {
      store.dispatch("getFriends", {
        success(resp) {
          friendRequests.value = store.state.user.friends;
          if(send)
            ElMessage.success(resp);
        },
        error(resp) {
          ElMessage.error(resp);
        }
      })
    }

    const clearFriend = (friendId) => {
      $.ajax({
        url: 'http://10.70.128.53:7090/api/friend/remove',
        type: 'POST',
        contentType: 'application/json',
        headers: {
          Authorization: `Bearer ${store.state.user.token}`,
        },
        data: JSON.stringify({
          userid:store.state.user.userId,
          friendId:friendId,
        }),
        success(resp) {
          if (resp.status === "success") {
            ElMessage.success(resp);
            Refreshing(false);//不弹出刷新成功提示的刷新
          } else {
            ElMessage.error(resp);
            Refreshing(false);
          }
        },
        error() {
          ElMessage.error("网络错误，请重试");
        },
      });
    };
    const privateChat = (friendId) =>{
      ElMessage.warning(friendId + "私聊功能还未实现");
      // console.log(friendId);
    }
    const dateFormatted = (dateStr) => {
      const date = new Date(dateStr);
      const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
      return formattedDate;
    }
    const Refreshing = (show) => {
      getFriendList(show);
    }
    onMounted(() => {
      Refreshing(false);
    });

    return {
      form,
      friendRequests,
      getFriendList,
      Search,
      Refreshing,
      clearFriend,
      privateChat,
      dateFormatted
    };
  },
};
</script>

<style scoped>
.user-avatar{
  width: 30%;
}

.HandleFriend-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*background-color: #f7f7f7;*/
}

.HandleFriend-box {
  height: 80vh;
  width: 75%;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(5, 5, 5, 0.11);
}

.search-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.el-input.input-with-select {
  margin-left: auto;
  margin-right: auto;
}
</style>
